<template>
  <div id="formLogin">
    <div @click="prev" class="regAccount">
      <van-icon name="arrow-left" color="#fff" size="24" />
    </div>
    <div class="title">
      <div style="font-size: 30px">忘记密码</div>
    </div>
    <van-form validate-first @failed="onFailed" @submit="onSubmit">
      <!-- 通过 pattern 进行正则校验 -->
      <div class="label-calss">
        <div><van-icon name="contact" color="#fff" size="20" /></div>
        <div style="margin-left: 10px">
          <input
            type="text"
            v-model="account"
            placeholder="请输入账号"
            class="input-text"
          />
        </div>
      </div>
      <div class="label-calss">
        <div><van-icon name="contact" color="#fff" size="20" /></div>
        <div style="margin-left: 10px">
          <input
            type="text"
            v-model="imgCode"
            placeholder="请输入图形验证码"
            class="input-text"
          />
        </div>
        <div class="code" @click="refreshCode">
          <s-identify :identifyCode="identifyCode"></s-identify>
        </div>
      </div>
      <div class="label-calss">
        <div><van-icon name="contact" color="#fff" size="20" /></div>
        <div style="margin-left: 10px">
          <input
            type="text"
            v-model="smsCode"
            placeholder="请输入验证码"
            class="input-text"
            style="width: 200px"
          />
        </div>
        <div
          style="color: #2bbc9b; font-size: 14px"
          @click="getSmsCode"
          v-if="!show"
        >
          获取验证码
        </div>
        <div style="color: #2bbc9b; font-size: 14px" @click="getSmsCode" v-else>
          重新发送（{{ count }}）s
        </div>
      </div>
      <div class="label-calss">
        <div><van-icon name="eye-o" color="#fff" size="20" /></div>
        <div style="margin-left: 10px">
          <input
            type="password"
            v-model="password"
            placeholder="请设置密码"
            class="input-text"
          />
        </div>
      </div>
      <div class="label-calss">
        <div><van-icon name="eye-o" color="#fff" size="20" /></div>
        <div style="margin-left: 10px">
          <input
            type="password"
            v-model="rPpassword"
            placeholder="请确认密码"
            class="input-text"
          />
        </div>
      </div>

      <div class="login-btn" @click="onSubmit">确 认</div>
    </van-form>
  </div>
</template>

<script>
import Vue from "vue";
import
  {
    Form,
    Toast,
    Button,
    Field,
    Image as VanImage,
    Icon,
    Dialog,
  } from "vant";
import { forget } from "../../api/login";

Vue.use(Form)
  .use(Toast)
  .use(Button)
  .use(Field)
  .use(VanImage)
  .use(Icon)
  .use(Dialog);

export default {
  data()
  {
    return {
      account: "",
      password: "",
      rPpassword: "",
      smsCode: "",
      imgCode: "",
      identifyCodes: "1234567890abcdefg",
      identifyCode: "",
      // 验证码倒计时
      count: 0,
      timer: null,
      show: false,
    };
  },
  created()
  {
    let self = this;
    if (window.sessionStorage.getItem("forget_sms_cut_time") != null)
    {
      self.count = Number(window.sessionStorage.getItem("forget_sms_cut_time"));
      self.show = true;
      self.timeCountDown();
    }
  },
  mounted()
  {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    register()
    {
      this.$router.push({ path: "register" });
    },
    prev()
    {
      this.$router.go(-1);
    },
    onFailed(errorInfo)
    {
      console.log("faile rorInfo");
    },
    randomNum(min, max)
    {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 刷新图片二维码
    refreshCode()
    {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    // 生成图片二维码
    makeCode(o, l)
    {
      for (let i = 0; i < l; i++)
      {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    // 获取验证码
    getSmsCode()
    {
      if (this.count <= 0)
      {
        send({ account: this.account }).then((res) =>
        {
          Toast(res.message);
          this.timeCountDown();
        });
      }
    },
    // 验证码倒计时
    timeCountDown()
    {
      const TIME_COUNT = 60;
      if (!this.timer)
      {
        const LocalTime = window.sessionStorage.getItem("forget_sms_cut_time");
        if (LocalTime == null)
        {
          window.sessionStorage.setItem("forget_sms_cut_time", TIME_COUNT);
          this.count = TIME_COUNT;
        } else
        {
          this.count = LocalTime;
        }
        this.show = true;
        this.timer = setInterval(() =>
        {
          if (this.count > 0)
          {
            this.count--;
            window.sessionStorage.setItem("forget_sms_cut_time", this.count);
          } else
          {
            this.show = false;
            clearInterval(this.timer);
            this.timer = null;
            window.sessionStorage.removeItem("forget_sms_cut_time");
          }
        }, 1000);
      }
    },
    // 提交数据
    onSubmit()
    {
      if (this.account.length == 0)
      {
        Toast("请填写账号！");
      }
      if (this.account.indexOf("@") != -1)
      {
        // 邮箱
        if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.account))
        {
          Toast("请输入正确的邮箱格式！");
          return;
        }
      } else
      {
        // 手机号
        if (!/^1\d{10}$/.test(this.account))
        {
          Toast("请输入正确的手机号码！");
          return;
        }
      }
      if (this.imgCode.length <= 0)
      {
        Toast("请输入图片验证码！");
        return;
      }
      if (this.imgCode !== this.identifyCode)
      {
        Toast("图片验证码输入错误！");
        return;
      }
      if (this.smsCode.length <= 0)
      {
        Toast("请输入手机验证码！");
        return;
      }
      if (this.password.length <= 0)
      {
        Toast("请输入密码！");
        return;
      }
      if (this.password !== this.rPpassword)
      {
        Toast("两次输入密码不一致！");
        return;
      }

      forget({
        account: this.account,
        password: this.password,
        smsCode: this.smsCode,
      }).then((res) =>
      {
        Dialog.alert({
          message: "登录成功！",
          theme: "round-button",
        }).then(() =>
        {
          this.$router.push({ path: "login" });
        });
      });
    },
  },
};
</script>

<style scoped>
#formLogin {
  background: #1b2b42;
  min-height: 100vh;
  font-size: 18px;
  width: 100%;
  height: 100vh;
}
.regAccount {
  color: #fff;
  width: 90%;
  text-align: left;
  padding-top: 20px;
  margin-bottom: 20px;
  margin-left: 5%;
}
.title {
  color: #fff;
  text-align: left;
  line-height: 60px;
  margin-left: 10%;
  margin-top: 60px;
  margin-bottom: 60px;
}
.van-cell {
  background: #1b2b42;
  /* line-height: 40px; */
}
.label-calss {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-left: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #21344d;
  color: #fff;
  width: 90%;
  line-height: 30px;
}
.input-text {
  border: none;
  background: none;
  color: #536680;
}
.forget {
  width: 90%;
  text-align: right;
  color: #536680;
  font-size: 18px;
}
.login-btn {
  margin: 30px 5%;
  background: #2b405d;
  color: #7489a4;
  line-height: 60px;
  font-size: 18px;
  border-radius: 10px;
}
</style>
